<template>
  <div>
    <div class="acea-row row-middle border_bottom pb-24" v-if="psInfo">
      <div class="avatar mr20"><img :src="psInfo.faceUrl"></div>
      <div class="dashboard-workplace-header-tip">
        <p class="dashboard-workplace-header-tip-title" v-text="psInfo.userName|| '-'"></p>
        <div class="dashboard-workplace-header-tip-desc">
<!--          <span class="dashboard-workplace-header-tip-desc-sp pb-1">性别: {{ psInfo.user.sex | sexFilter }}</span>-->
          <span class="dashboard-workplace-header-tip-desc-sp pb-1">手机号码: {{ psInfo.mobile }}</span>
        </div>
        <div class="dashboard-workplace-header-tip-desc">
          <span class="dashboard-workplace-header-tip-desc-sp pb-1">提交时间: {{ psInfo.createTime }}</span>
        </div>
      </div>
    </div>
    <el-row align="middle" :gutter="10" class="ivu-mt mt20">
      <el-col :span="3">
        <el-menu
          default-active="0"
          class="el-menu-vertical-demo"
          @select="changeType"
        >
          <el-menu-item :name="item.val" v-for="(item, index) in list" :key="index" :index="item.val">
            <span slot="title">{{item.label}}</span>
          </el-menu-item >
        </el-menu>
      </el-col>
      <el-col :span="21">
        <el-form ref="pram" label-width="100px" @submit.native.prevent>
          <el-form-item label="标题：">
            <div class="item-line">{{psInfo.title}}</div>
          </el-form-item>
          <el-form-item label="内容：">
            <el-input v-model="psInfo.content" type="textarea" :rows="10" placeholder="内容" readonly/>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { infobyconditionApi, topdetailApi } from '@/api/user'
import * as adviseApi from "@/api/adviseApi.js";
import {Debounce} from '@/utils/validate'
export default {
  name: "AdviseDetails",
  props:{
    id: {
      type: Number,
      default: null
    },
  },
  filters: {
    sexFilter(status) {
      const statusMap = {
        0: '未知',
        1: '男',
        2: '女',
        3: '保密'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      loading: false,
      isDisabled: this.$route.params.isDisabled==='1'?true:false,
      columns: [],
      list: [
        { val: '0', label: '意见建议' },
      ],
      tableData: {
        data: [],
        total: 0
      },
      tableFrom: {
        page: 1,
        limit: 6,
        type : '0',
        userId : ''
      },
      psInfo: {
        user:{},
      },
      tipsText:''
    }
  },
  mounted(){
    if(this.id){
      this.initEditData()
    }

  },
  methods: {
    close() {
      this.$emit('hideEditDialog')
    },

    initEditData() {
      adviseApi.getInfo({id : this.id}).then(res => {
      //后期接口调用
      /*let res = {"user":{"uid":7933,"account":"15812980822","realName":"张建东","nickname":"b1f372d99453","avatar":"https://api.java.crmeb.net/crmebimage/store/2020/08/15/adae23e354114cd5bd8f3cae740741c23opxeh8kw2.jpg","phone":"15812980822","sex":1,"country":"CN","addIp":"","lastIp":""},"title":"一些意见建议","content":"123"};*/

      this.psInfo = res
      //this.pram = {...res.photo}
      })
    },
    changeType(key) {
      this.tableFrom.type = key
    },
  }
}
</script>

<style scoped lang="scss">
.avatar{
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  margin-left: 18px;
  img{
    width: 100%;
    height: 100%;
  }
}
.dashboard-workplace {
  &-header {
    &-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      margin-right: 16px;
      font-weight: 600;
    }

    &-tip {
      width: 82%;
      display: inline-block;
      vertical-align: middle;
      margin-top: -12px;
      &-title {
        font-size: 13px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
        line-height: 18px;
        padding: 10px 0 10px;
      }

      &-desc {
        &-sp {
          width: 32%;
          color: #17233D;
          font-size: 13px;
          display: inline-block;
        }
      }
    }

    &-extra {
      .ivu-col {
        p {
          text-align: right;
        }

        p:first-child {
          span:first-child {
            margin-right: 4px;
          }

          span:last-child {
            color: #808695;
          }
        }

        p:last-child {
          font-size: 22px;
        }
      }
    }
  }
}
.pb-1{
  padding-bottom: 10px;
}
.mr20{
  margin: 0 20px;
}
.border_bottom{
  border-bottom: 1px solid #E7EAEC;
}
.pb-24{
  padding-bottom: 24px;
}
.title-desc{
  font-size:16px;
  color:#087fff;
  font-weight:bold;
  margin:0 0 20px 10px;
}

.pictrue{
  width: 120px;
  height: 120px;
  border: 1px dotted rgba(0,0,0,0.1);
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  .photo-el-image{
    width: 100%;
    height: 100%;
  }
  img{
    width: 100%;
    height: 100%;
  }
  video{
    width: 100%;
    height: 100%;
  }
}
.videoBox{
  width: 300px;
  height: 180px;
  //border: 1px dotted rgba(0,0,0,0.1);
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  border-radius:15px;
  img{
    width: 100%;
    height: 100%;
  }
  video{
    width: 100%;
    height: 100%;
    border-radius:15px;
  }
}
.btndel{
  position: absolute;
  z-index: 1;
  width :20px !important;
  height: 20px !important;
  font-size:20px;
  left: 92px;
  top: -4px;
}
.video-btndel{
  left: 282px;
  top: 1px;
}
.tips{
  color: #c0c4cc;
  font-size:14px;
}
</style>
